<template>
  <canvas-template :item="item" :pageId="pageId" :popId="popId" :isPropagation="false">
    <template v-slot:common>
      <div ref="canvasCon" class="wb-mc" :style="styles" @click.stop>
        <img v-if="commonAttr.defaultPicUrl" :src="commonAttr.defaultPicUrl">
      </div>
    </template>
  </canvas-template>
</template>
<script>
import CanvasTemplate from '@/components/games/createjs/canvas-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { CANVAS_MC_CLASSNAME_TYPES_MAP, CREATEJS_CONSTS } from '@/common/const-canvas'
import CreatejsManager from '@/components/games/createjs/CreatejsManager'
import { ref } from 'vue'
import { isHasOwnProperty } from '@/plugins/utils'

export default {
  name: "WbMc",
  mixins: [utils, commonUtils],
  props: ['item'],
  setup () {
    return {
      createjsManager: null,
    }
  },
  components: {
    CanvasTemplate
  },
  computed: {
    lists() {
      return this.item.lists
    },
    styles() {
      return {
        transform: 'rotate(' + this.item.commonAttr.rotate + 'deg)',
        opacity: this.item.commonAttr.opacity,
        width: this.item.conStyles.width,
        height: this.item.conStyles.height,
        backgroundColor: this.item.styles.backgroundColor,
      }
    }
  },
  mounted() {
    if(!this.isH5Edit) {
      this.initCreatejs(window.createjs)
    }
  },
  methods: {
    initCreatejs(createjs) {
      if(!createjs || this.canvas || !this.$refs.canvasCon) {
        return
      }
      this.loadJs(this.initStage)
    },
    loadJs(cb) {
      if(CANVAS_MC_CLASSNAME_TYPES_MAP[this.commonAttr.customClassName]) {
        cb()
      } else {
        let loadJs = CREATEJS_CONSTS[this.commonAttr.itemType].className
        if(this.commonAttr.loadJsUrl) {
          this.dynamicsLoadScript(this.commonAttr.loadJsUrl, `${loadJs}`, cb)
        }
      }
    },
    initStage() {
      this.createjsManager = new CreatejsManager()
      this.createjsManager.init(this.$refs.canvasCon, this.item)
    },
  },
  beforeUnmount() {
    if(this.createjsManager) {
      this.createjsManager.destroy()
    }
    this.createjsManager = null
  },
};
</script>
<style lang="scss">
.wb-mc {
  width: inherit;
  height: inherit;
  background-color: transparent;

  canvas{
    width: inherit;
    height: inherit;
    background-color: transparent;
  }

  img{
    object-fit: contain;
    width: 100%;
  }
}
</style>


